<template>
    <view class="menu clearfix">
        <view class="menu-item" @click="navto(item.id)" v-for="(item,index) in menuList" :key="index">
            <image class="menu-img" :src="item.image" mode="aspectFit"></image>
            <view class="name">{{item.name}}</view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                menuList:[
                    {
                        id:1,
                        image:"/static/images/index/icon-meisu.png",
                        name:"美宿"
                    },
                    {
                        id:2,
                        image:"/static/images/index/icon-meishi.png",
                        name:"美食"
                    },
                    {
                        id:3,
                        image:"/static/images/index/icon-meijing.png",
                        name:"美景"
                    },
                    {
                        id:4,
                        image:"/static/images/index/icon-xiangcun.png",
                        name:"美村"
                    },
                    {
                        id:5,
                        image:"/static/images/index/icon-gouwu.png",
                        name:"文化"
                    },
                    {
                        id:6,
                        image:"/static/images/index/icon-youji.png",
                        name:"游记"
                    },
                    {
                        id:7,
                        image:"/static/images/index/icon-huodong.png",
                        name:"活动"
                    },
                    {
                        id:8,
                        image:"/static/images/index/icon-fuwu.png",
                        name:"服务"
                    },
                ]
            }
        },
        methods:{
            navto(id){
                let url="/pages/menu/Menu";
                if(id==8){
                    url = "/pages/service/Service";
                }
                uni.navigateTo({
                    url: url,
                    success: (res) => {
                        console.log(res);
                    },
                    fail: (mess) => {
                        console.log(mess);
                    }
                });
            }
        },
        
    }
</script>

<style>
    .menu{
        margin-bottom: 30px;
    }
    .menu-item{
        float: left;
        width: 25%;
        text-align: center;
        margin-top: 30px;
    }
    .menu-img{
        vertical-align: middle;
        width: 2.0rem;
        height: 2.0rem;
    }
    .name{
        margin-top: 0.38rem;
        font-size: 0.5rem;
    }
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
    }
</style>
